<template>
  <div id="main">
    <div class="top-box">
      <img class="left-arrow" src="@/assets/书城/shape_u112.png" alt />
      <img @touchstart="gomask" class="shape-btn" src="@/assets/书城/u3227.png"  />
    </div>
    <div class="book-details">
      <img class="bookimg" :src="bookdetail.bookimg" />
      <div class="bookcontent">
        <p class="booktitle">{{bookdetail.booktitle}}</p>
        <p class="author">
          作者：
          <span>{{bookdetail.author}}</span>
        </p>
        <p class="introduction">{{bookdetail.bookcontent}}</p>
        <p class="mark">
          <img class="star-icon" v-for="index in starnum" :key="index" :src="star" />
          <span class="score">{{starnum.length}}.0</span>
        </p>
      </div>
    </div>
    <img class="line" src="@/assets/书城/分割线_u3221.png" />
    <div class="contentbox">
      <h3>内容介绍</h3>
      <p class="content-text">{{bookdetail.content}}</p>
    </div>
    <img class="line" src="@/assets/书城/分割线_u3221.png" />
    <div class="navbox">
      <span :class="{active:isaddclass== 1}" @touchstart="tocatalogue">目录</span>
      <span :class="{active:isaddclass== 2}" @touchstart="torecommdend">书评</span>
      <span :class="{active:isaddclass== 3}" @touchstart="toreview">推荐</span>
    </div>
    <hr />
    <div class="routerview">
      <router-view />
    </div>
    <div class="bottom-box">
      <div @touchstart="addbook">
        <img src="@/assets/书城/u2601.png" alt />
        <p >加入书架</p>
      </div>
      <div @touchstart="golistening">
        <img src="@/assets/书城/u2605.png" alt />
        <p>立即试听</p>
      </div>
      <div @touchstart="loadbook">
        <img src="@/assets/书城/down.png" alt />
        <p>立即下载</p>
      </div>
    </div>
    <div class="hidbox" :class="{addhidboxclass:isaddmask}">
      <p class="shapetitle">立即分享给好友</p>
      <div class="linkbox">
        <div>
          <div class="linkimg wximg">
            <img src="@/assets/wechatweibo/u1394.png" alt />
          </div>
          <span>微信</span>
        </div>
        <div>
          <div class="linkimg wbimg">
            <img src="@/assets/wechatweibo/u1397.png" alt />
            <img src="@/assets/wechatweibo/u1398.png" alt />
            <img src alt />
          </div>
          <span>微博</span>
        </div>
        <div>
          <div class="linkimg lkimg">
            <img width="24" height="24" src="@/assets/wechatweibo/u1402.svg" alt />
          </div>
          <span>复制连接</span>
        </div>
        <div>
          <div class="linkimg spimg">
            <img src="@/assets/wechatweibo/u1404.png" alt />
          </div>
          <span>分享海报</span>
        </div>
      </div>
      <hr class="hidboxline" />
      <p class="delbtn" @touchend="isaddmask=false">取消</p>
    </div>
    <div class="mask" :class="{addmaskclass:isaddmask}"></div>
    <div class="point" :class="{pointanimation:isshow}">
      <p>已加入书架</p>
    </div>
    <div class="point" :class="{pointanimation:isload}">
      <p>已下载</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isaddmask:false,
      isshow: false,
      isadd: false,
      isload:false,
      addbooks: "加入书架",
      bookdetail: {
        bookimg:
          "https://cdn7.axureshop.com/demo/1182587/images/%E5%90%AC%E4%B9%A6%E9%A1%B5%E9%9D%A2/%E4%B9%A6%E7%B1%8D%E5%B0%81%E9%9D%A2_u3208.png",
        booktitle: "女权主义，从零开始",
        author: "[波] 斯坦尼斯瓦夫·莱姆",
        bookcontent: "波兰科幻大师斯坦尼斯瓦夫•莱姆代表作，以诗意笔触和深邃哲…",
        content:
          "小说以一个神秘大洋覆盖的星球为背景，这个大洋是一个胶质构成的生命体，它能够进入人的大脑，将记忆深处最不为人知的部分，以具象的形式呈现在人眼前。在这片大海面前，任何人都毫无秘密可言，心灵深处的痛苦被袒露无遗。科学家们围绕这个不解"
      },
      starnum: [0, 1, 2, 3, 4],
      star:
        "https://cdn7.axureshop.com/demo/1182587/images/%E4%B9%A6%E7%B1%8D%E8%AF%A6%E6%83%85/star_u2542.png",
      isaddclass: 1
    };
  },
  methods: {
    addbook() {
      if (this.isadd == false) {
        this.isadd = true;
        this.isshow = true;
      } else {
        this.isadd = false;
        this.isshow = false;
      }
    },
    loadbook(){
      if(this.isload==false){
        this.isload=true
      }else{
        this.isload=false
      }
    },
    tocatalogue() {
     this.isaddclass=1
      this.$router.push(
        {
          name: "catalogue"
        },
        () => {}
      );
    },
    torecommdend() {
      this.isaddclass=2
      this.$router.push(
        {
          name: "recommend"
        },
        () => {}
      );
    },
    toreview() {
      this.isaddclass=3
      this.$router.push(
        {
          name: "review"
        },
        () => {}
      );
    },
    golistening(){
      this.$router.push({
        path:'/listening'
      },()=>{})
    },
    gomask(){
      if(this.isaddmask==false){
        this.isaddmask=true
      }else{
        this.isaddmask=false
      }
    }
  }
};
</script>
<style lang="less" scoped>

#main {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  .top-box {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    margin-bottom: 3.5rem;
    width: 100%;
    height: 1.6rem;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 1);
    padding: 0 1.5rem;
    padding-top: 4.5rem;
    padding-bottom: 2.5rem;
    height: 5rem;
    z-index: 99;
    .left-arrow {
      width: .9rem;
      height: 1.4rem;
    }
    .shape-btn {
      width: 1.6rem;
      height: 1.6rem;
    }
  }
  .book-details {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 0 1.5rem;
    margin-top: 7rem;
    .bookimg {
      float: left;
      margin-right: 1.5rem;
    }
    .bookcontent {
      overflow: hidden;
      .booktitle {
        margin-top: .8rem;
        margin-bottom: .9rem;
        font-size: 2rem;
        font-weight: 500;
        font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
      }
      .author {
        width: 19.4rem;
        font-family: "PingFangHK-Regular", "PingFang HK";
        font-size: 1.4rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
      }
      .introduction {
        font-family: "PingFangHK-Regular", "PingFang HK";
        font-weight: 400;
        font-style: normal;
        font-size: 1.2rem;
        color: #999999;
        margin-bottom: 1.2rem;
      }
      .mark {
        height: 2.3rem;
        overflow: hidden;
        .star-icon {
          float: left;
          margin-top: .5rem;
          margin-left: .2rem;
        }
        .score {
          float: left;
          font-family: "Helvetica-Bold", "Helvetica Bold", "Helvetica";
          font-weight: 700;
          font-style: normal;
          font-size: 2rem;
          color: #ffce44;
          margin-left: 1rem;
        }
      }
    }
  }
  .line {
    float: left;
    margin-left: 1.5rem;
  }
  .contentbox {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    h3 {
      margin-bottom: 1rem;
    }
    .content-text {
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      font-style: normal;
      font-size: 1.4rem;
      color: #999999;
      text-align: left;
      line-height: 2.6rem;
    }
  }
  .navbox {
    margin-top: 3.5rem;
    overflow: hidden;
    padding: 0 1.5rem;
    span {
      float: left;
      margin-right: 2rem;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-style: normal;
      font-size: 1.6rem;
      color: #999999;
      height: 4rem;
      line-height: 4rem;
    }
    .active {
      font-weight: bold;
      color: rgb(40, 208, 148);
      position: relative;
      &::after {
        position: absolute;
        bottom: 0;
        right: 50%;
        transform: translate(50%);
        content: "";
        width: 2.7rem;
        height: .6rem;
        border-radius: .6rem;
        background-color: rgb(40, 208, 148);
      }
    }
  }
  .bottom-box {
    display: flex;
    height: 5.1rem;
    width: 100%;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99;
    div {
      position: relative;
      width: 13.2rem;
      img {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: .3rem;
      }
      p {
        position: absolute;
        left: 50%;
        width: 5.6rem;
        transform: translate(-50%);
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        font-size: 1.4rem;
        text-align: left;
        top: 2.3rem;
      }
      &:nth-of-type(2) {
        background-color: rgb(40, 208, 148);
        p {
          color: white;
        }
      }
    }
  }
  hr {
    border: .1rem solid #f2f2f2;
  }
  .hidbox {
    position: fixed;
    bottom: -100%;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    width: 100%;
    height: 20.4rem;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border-width: .1rem;
    border-style: solid;
    border-color: rgba(255, 255, 255, 1);
    border-radius: 2rem;
    border-bottom-left-radius:0 ;
    border-bottom-right-radius:0 ;
    
    .shapetitle {
      font-family: "ArialMT", "Arial";
      font-weight: 400;
      font-style: normal;
      font-size: 1.4rem;
      text-align: center;
      margin-top: 2rem;
      margin-bottom: 2rem;
    }
    .hidboxline {
      margin-top: .8rem;
      margin-bottom: .8rem;
      border: .5rem solid #f2f2f2;
    }
    .delbtn {
      text-align: center;
      font-size: 1.4rem;
      color: #323233;
      font-weight: 400;
    }
    .touchdelbtn{
      background-color: #f2f2f2; 
    }
    .linkbox {
      display: flex;
      justify-content: space-evenly;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-family: "ArialMT", "Arial";
          font-weight: 400;
          color: #333333;
          font-size: 1.2rem;
        }
        .linkimg {
          margin-bottom: .5rem;
          width: 5rem;
          height: 5rem;
          border-radius: 50%;
        }
        .wximg {
          background: url("@/assets/wechatweibo/u1393.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .wbimg {
          background: url("@/assets/wechatweibo/u1399.png");
          position: relative;
          img {
            position: absolute;
            left: 46%;
            top: 58%;
            transform: translate(-50%, -50%);
            &:last-of-type {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .lkimg {
          background: url("@/assets/wechatweibo/u1401.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .spimg {
          background: url("@/assets/wechatweibo/u1401.png");
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
  .addhidboxclass{
      animation: addhidbox 0.5s linear forwards;
    }
    @keyframes addhidbox {
      0%{
        bottom: -100%;
      }
      100%{
        bottom: 0;
      }
    }
    .mask {
    width: 100%;
    position: fixed;
    background-color: black;
    opacity: 0.5;
    min-height: 100%;
    top: 100%;
    left: 0;
    z-index: 98;
  }
  .addmaskclass{
    animation: addmask 0.5s linear forwards;
  }
  @keyframes addmask {
    0%{
      top:100%;
    }
    100%{
      top: 0;
    }
  }
  .point {
    width: 13rem;
    height: 10rem;
    border-radius: 1rem;
    background-color: black;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 1.8rem;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 10rem;
  }
  .pointanimation {
    animation: myshow 2s linear forwards;
  }
  @keyframes myshow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.25;
    }
    60% {
      opacity: 0.5;
    }
    70% {
      opacity: 0.5;
    }
    80% {
      opacity: 0.5;
    }
    90% {
      opacity: 0.25;
    }
    100% {
      opacity: 0;
    }
  }
}
</style>